<template>
  <div class="app">
    <div class="header" @click="goBack">
      <img src="../../assets/image/icon/icon-back.png">
    </div>
    <div class="card">
      <span class="title">使用说明</span>
      <div class="content" v-html="content">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '1.关注公众号，进入公众号，选择"访客预约"；<br>2.进入身份信息录入页面，如您第一次访问，需要填写您的姓名、身份证号、电话及验证码，验证无误后可进行预约；<br>3.填写被访问信息，员工姓名、员工电话、预约时间、随行人数、访问事由；<br>4.提交后，在公众号首页可收到审核的消息，管理员审核同意后，您可拜访该部门；<br>5.如您想查看你的拜访记录信息，可通过"拜访记录"查看；'
    }
  },
  created() {
    document.title = '使用说明'
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang='scss'>
.header {
  height: 44px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  background: #fff;
  img {
    width: 15px;
    height: 14px;
  }
}
.card {
  margin: 12px 15px 0;
  padding: 24px 15px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 3px 6px rgba(38, 126, 255, 0.16);

  .title {
    line-height: 21px;
    font-size: 15px;
    font-weight: 500;
    color: #707070;
  }
  .content {
    margin-top: 12px;
    line-height: 24px;
    font-size: 15px;
    font-weight: 500;
    color: #141E2A;
  }
}
</style>
